<template>
    <div class="zb-search-input" catchtouchmove="move" :class="{ 'onFocus': hasBtn }">
        <div class="inner">
            <div class="input-box" @click="onClickClear" :class="{ 'clear': hasBtn && (type === 'search') }">
                <input
                    v-model="currentValue"
                    @focus="onFocus"
                    @click.stop="move"
                    class="input"
                    :class="[textCenter ? 'text-center' : '']"
                    :placeholder="placeholder"
                    type="text" />
            </div>
            <div @click="onClickCancel" v-if="hasBtn && (type === 'cancel')" class="btn btn-mobile transparent-border btn-white">取消</div>
            <div @click="onClickSubmit" v-if="hasBtn && (type === 'search')" class="btn btn-mobile btn-red">搜索</div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'SearchInput',
    model: {
        prop: 'value',
        event: 'change',
    },
    props: {
        value: {
            type: String,
            required: true,
        },
        placeholder: {
            type: String,
            default: '必填',
        },
        textCenter: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            currentValue: null,
            hasBtn: false,
        };
    },
    computed: {
        type() {
            return this.currentValue ? 'search' : 'cancel';
        },
    },
    watch: {
        value(val) {
            this.currentValue = val;
        },
        currentValue(val) {
            this.$emit('change', val);
        },
    },
    methods: {
        onFocus() {
            this.hasBtn = true;
        },
        onBlur() {
            this.hasBtn = false;
        },
        onClickClear() {
            this.currentValue = '';
        },
        onClickCancel() {
            this.onBlur();
        },
        onClickSubmit() {
            this.onBlur();
        },
    },
    onLoad() {
        this.currentValue = this.value;
    },
};
</script>
<style lang="less">
@import "../../lib/style/mixins.less";
.zb-search-input {
    &.onFocus::after {
        position: fixed;
        content: '';
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.5);
        z-index: 1;
    }
    .inner {
        display: flex;
        align-items: center;
        padding: 10px 36rpx;
        background: #f8f8f8;
        .text-normal();
        .input-box {
            position: relative;
            flex: 1;
            padding: 0 60rpx;
            text-align: left;
            background-color: #ffffff;
            border-radius: 70rpx;
            pointer-events: none;
            &::before {
                position: absolute;
                left: 10px;
                top: 50%;
                transform: translateY(-50%);
                font-family: 'iconfont';
                content: "\e610";
                font-size: 32rpx;
                color: @grey-color;
                pointer-events: none;
            }
            &.clear {
                padding-right: 60rpx;
                &::after {
                    position: absolute;
                    right: 10px;
                    top: 50%;
                    transform: translateY(-50%);
                    font-family: 'iconfont';
                    content: "\e80b";
                    font-size: 32rpx;
                    pointer-events: auto;
                    color: @grey-color;
                }
            }
            .input {
                padding: 10rpx 0;
                // text-align: left;
                // background-color: #ffffff;
                // border-radius: 60rpx;
                pointer-events: auto;
            }
        }
        .btn {
            padding: 10rpx 10px;
            margin-left: 10px;
        }
    }
}
</style>
